/* eslint-disable no-unused-vars */
import React, { useState } from 'react';
import { Drawer, Button, Affix, Table, Checkbox, Upload, Form, message } from 'antd';
import { LeftSquareTwoTone, UploadOutlined } from '@ant-design/icons';
import { If } from 'babel-plugin-jsx-control-statements';
import Cookies from 'js-cookie';
import { useBoolean } from 'ahooks';
import BusinessType from '@/utils/BusinessType';
import RequestApi from '@/utils/request';
import css from './index.scss';

export default (props) => {
	const [state, { toggle }] = useBoolean(true);
	const showDrawer = () => {
		toggle(true);
	};
	const onClose = () => {
		toggle(false);
	};
	const [isSubmit, setSubmit] = useState(false); // 存储是否完成的状态
	const { advice, form } = props;
	const values = form.getFieldsValue();
	const onChange = (value) => {
		setSubmit(value.target.checked);
	};
	const host = 'http://192.168.21.86:8080';
	const assignTaskItemId = {
		name: 'file',
		// action: `http://192.168.43.11:8080/oss/upload/${2}/${0}/${BusinessType.getOthers()}`,
		action: `${host}/oss/upload/${2}/${0}/${BusinessType.getOthers()}`,
		headers: {
			authorization: 'authorization-text',
		},
		beforeUpload: () => {
			return false;
		},
		onChange(info) {
			if (info.file.status !== 'uploading') {
				console.log(info.file, info.fileList);
			}
			if (info.file.status === 'done') {
				message.success(`${info.file.name} file uploaded successfully`);
			} else if (info.file.status === 'error') {
				message.error(`${info.file.name} file upload failed.`);
			}
		},
	};
	const columns = [
		{
			title: '整改项',
			dataIndex: 'name',
			key: 'name',
		},
		{
			title: '附件',
			dataIndex: 'attaches',
			key: 'age',
		},
		{
			title: '是否完成(佐证材料)',
			dataIndex: 'id',
			key: 'id',
			render: () => {
				return (
					<Form.Item name="assignTaskItemId">
						<Checkbox onChange={onChange}>
							<Upload {...assignTaskItemId}>
								<Button icon={<UploadOutlined />}>选择文件</Button>
							</Upload>
						</Checkbox>
					</Form.Item>
				);
			},
		},
	];
	const submit = () => {
		if (isSubmit === true) {
			console.log(values);
			console.log(isSubmit);
			const formData = new FormData();
			formData.append('file', 12);
			// RequestApi.connection('post', )
			const submitAssignTaskDTOList = [];
			// 获取整改项数据并赋值
			for (let i = 0; i < advice.resultAssignTasks.length; i += 1) {
				const task = {};
				task.id = advice.resultAssignTasks[i].id;
				task.name = advice.resultAssignTasks[i].name;
				task.assignTaskItemIds = [];
				submitAssignTaskDTOList.push(task);
				const a = `assignTaskItemId_${advice.resultAssignTasks[i].id}`;
				console.log(a);
				console.log(values[a]);
				console.log(values.assignTaskItemId_2);
			}
			// [
			// 	{
			// 		assignTaskItemIds: [0],
			// 		id: 0,
			// 		name: 'string',
			// 	},
			// ];
			values.wallAndCeillingIsDecoration = 1;
			values.submitAssignTaskDTOList = submitAssignTaskDTOList;
			values.userId = Cookies.get('id');
			form
				.validateFields()
				.then(() => {
					// 先提交文件数据，然后再提交表单
					const code = RequestApi.connection('psot', `parkLotRecordTask/submitReformInfo`, values);
					if (code === 200) {
						message.success(`整改成功`);
					}
				})
				.catch(() => {
					message.error(`你还有未提交的信息`);
				}); // 触发表单验证
		} else if (isSubmit === false) {
			message.error(`你还没有确认是否完成`);
		}
	};
	return (
		<div className={css.app}>
			<Affix style={{ position: 'absolute', top: '50%', right: 0 }}>
				<Button type="primary" onClick={showDrawer} className={css.left}>
					<LeftSquareTwoTone />
				</Button>
			</Affix>
			<If condition={advice !== undefined}>
				<Drawer title={advice.name} width={640} placement="right" closable={false} onClose={onClose} visible={state}>
					<Form.Item label="审核结果">{advice.status === 0 ? '审核不通过' : '审核通过'}</Form.Item>
					<Form.Item label="审核意见">{advice.auditReason}</Form.Item>
					<Table dataSource={advice.resultAssignTasks} columns={columns} />
					<Button type="primary" onClick={submit}>
						提交
					</Button>
				</Drawer>
			</If>
		</div>
	);
};
